import React from 'react'
import formCSS from './submitForm.module.scss'

import useForm from './useForm'

const SubmitForm = ({sucessCallback}) => {


    const handleValueChange = (event) => {
        dispatchFromValue({
            type: event.target.name,
            payload: event.target.value
        })
        dispatchFromErrMsg({
            type: event.target.name,
            payload: event.target.value
        })
    }

    const {
        formErrMsg,
        dispatchFromErrMsg,
        dispatchFromValue,
        fromValue,
        handleSubmit,
        errMessage,
    } = useForm(sucessCallback)
    return (
        <div className={formCSS.form}>
            <section className={formCSS.formSection}>
                <input 
                    className={
                        `${formCSS.formInput} ${formErrMsg.userName !== ''? formCSS.error: null}`
                    }
                    name="userName"
                    value={fromValue.userName}
                    onChange={handleValueChange}
                    />
                {formErrMsg.userName && <span>{formErrMsg.userName}</span>}
            </section>
            <section className={formCSS.formSection}>
                <input 
                    className={
                        `${formCSS.formInput} ${formErrMsg.userEmail !== ''? formCSS.error: null}`
                    }
                    name="userEmail"
                    value={fromValue.userEmail}
                    onChange={handleValueChange}
                    />
                {formErrMsg.userEmail && <span>{formErrMsg.userEmail}</span>}
            </section>
            <section className={formCSS.formSection}>
                <input 
                    className={
                        `${formCSS.formInput} ${formErrMsg.confirmEmail !== ''? formCSS.error: null}`
                    }
                    name="confirmEmail"
                    value={fromValue.confirmEmail}
                    onChange={handleValueChange}
                />
                {formErrMsg.confirmEmail && <span>{formErrMsg.confirmEmail}</span>}
            </section>
            <section className={formCSS.formSection}>
                <div className={formCSS.formSubmitButton}
                onClick={handleSubmit}
                >send</div>
            </section>
            <section className={formCSS.formSection}>
                    <span>{errMessage}</span>
            </section>

        </div>
    )
}

export default SubmitForm